<template>
    <div class="wrap ">
        <div class="flexWrap">
            <div class="leftWrap">
                <div class="app-button-container">
                    <el-button type="primary" @click="dialogLeftTop1_1_show()"> 应用前一周排班数据</el-button>
                    <el-button type="primary" @click="showScheduling()"> 导入</el-button>
                    <el-button type="primary" @click="dialogCreateShow()">新增排班</el-button>
                </div>

                <div class="filter-container">
                    <div class= 'filterBox'>
                        <div class='leftPart filterPart'>
                            <!-- <el-button type="primary" @click="dialogLeftTop1_1_show()"> 上一周</el-button>
                            <el-button type="primary" @click="dialogLeftTop1_1_show()"> 本周</el-button>
                            <el-button type="primary" @click="dialogLeftTop1_1_show()"> 下一周</el-button> -->
                        </div>
                        <div class='rightPart filterPart'>
                            <el-date-picker
                                v-model="filter.dateArr"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions2">
                            </el-date-picker>
                            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
                        </div>
                    </div>
                </div>
                <div class="block" v-if = 'weeks && weeks.length > 0'>
                <div class="AMOrPM">
                    <p style ='background-color:#f0f2f5;'></p>
                    <p>上午</p>
                    <p>下午</p>
                </div>
                <el-carousel class = 'sliderWrap' height="187px" :autoplay = false >
                    <el-carousel-item v-for="(item, i) in schedulingList" :key="i" >
                        <ul class='appointmentTimeItem' >
                            <li v-for= '(subItem, index) in item' :key='index' class='appointmentTime'> 
                                <p class='myAppointment' style ='background-color:#f0f2f5;'>
                                    {{subItem.date | dateFilter}}
                                </p>
                                <p class='work' style = 'cursor: pointer;' @click='dialogCreateShow(subItem, 0)'>
                                    <template>
                                        {{subItem.amSchedule.type | typeFilter}}
                                        <span class = 'badge' v-if = 'subItem.amSchedule.type === 1'>{{subItem.amSchedule.optNo}}台</span>
                                    </template>
                                </p>
                                <p class='work' style = 'cursor: pointer;' @click='dialogCreateShow(subItem, 1)'>
                                    <template>
                                        {{subItem.pmSchedule.type | typeFilter}}
                                        <span class = 'badge' v-if = 'subItem.pmSchedule.type === 1'>{{subItem.pmSchedule.optNo}}台</span>
                                    </template>
                                </p>
                            </li>
                        </ul>
                    </el-carousel-item>
                </el-carousel>
            </div>
            </div>
            <div class="rightWrap">
                <category 
                    :options = 'options'
                    @selectedType = 'selectedType'
                    @addCategorySubmit = 'addCategorySubmit'>
                </category>
            </div>
        </div>
        
        <!-- 新增 -->
        <el-dialog  :title="dialogCreateTitle" :visible.sync="dialogCreate" >
            <el-form ref="dialogCreateData" :model="dialogCreateData" label-width="120px" :inline = true>
                <el-form-item label="医生:">
                    <el-input type="input" v-model ='dialogCreateData.doctorName' style="width: 196px;"></el-input>
                </el-form-item>
                <el-form-item label="医生编码:">
                    <el-input type="input" v-model ='dialogCreateData.doctorCode' style="width: 196px;"></el-input>
                </el-form-item>
                
                <el-form-item label="排班日期:" >
                    <el-date-picker
                        v-model="dialogCreateData.date"
                        type="date"
                        value-format = 'yyyy-MM-dd HH:mm:ss'
                        placeholder="选择日期"
                        style="width: 196px;">
                    </el-date-picker>
                </el-form-item>
                
                <el-form-item label="上下午:" >
                    <el-select v-model="dialogCreateData.ampmType" placeholder="请选择上下午" style="width: 196px;">
                        <el-option label = "上午" :value = 0></el-option>
                        <el-option label = "下午" :value = 1></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="坐班类型:" >
                    <el-select v-model="dialogCreateData.type" placeholder="请选择坐班类型" style="width: 196px;">
                        <el-option :value = 0 label = '门诊'></el-option>
                        <el-option :value = 1 label = '手术'></el-option>
                        <el-option :value = 2 label = '休息'></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if= 'dialogCreateData.type === 1' label="手术台数:" >
                    <el-input-number v-model="dialogCreateData.operationNum" :min="1" style="width: 196px;" label="输入手术台数"></el-input-number>
                </el-form-item>
                <el-form-item label="是否删除:">
                    <el-select v-model="dialogCreateData.isDeleted" placeholder="请选择坐班类型" style="width: 196px;">
                        <el-option label = "否" :value = 0></el-option>
                        <el-option label = "是" :value = 1></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="optNo" style="display: none;">
                    <el-input type="input" v-model ='dialogCreateData.optNo'></el-input>
                </el-form-item>
                <el-form-item label="id" style="display: none;">
                    <el-input type="input" v-model ='dialogCreateData.id'></el-input>
                </el-form-item>
                <el-form-item label="createId" style="display: none;">
                    <el-input type="input" v-model ='dialogCreateData.createId'></el-input>
                </el-form-item>
                <el-form-item label="updateId" style="display: none;">
                    <el-input type="input" v-model ='dialogCreateData.updateId'></el-input>
                </el-form-item>
                <el-form-item label="医生id" style="display: none;">
                    <el-input type="input" v-model ='dialogCreateData.doctorId'></el-input>
                </el-form-item>
                <el-form-item label="创建日期" style="display: none;">
                    <el-input type="input" v-model ='dialogCreateData.createTime' style="width: 196px;" ></el-input>
                </el-form-item>
                <el-form-item label="更新日期" style="display: none;">
                    <el-input type="input" v-model ='dialogCreateData.updateTime' style="width: 196px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCreate = false">取 消</el-button>
                <el-button type="primary" @click="dialogCreateSubmit('dialogCreateData')">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import waves from '@/directive/waves/index.js'
    import complexTable from '@/views/table/complexTable'
    import category from 'yimiviews/components/category'
    import { pending, create, select } from '@/api/knowledgeManage/doctorScheduling'
    export default {
      directives: { waves },
      components: { category, complexTable },
      mounted() {
        this.initSelect()
        this.showScheduling()
        this.generateDay()
      },
      data() {
        return {
          filter: {
            dateArr: []
          },
          dialogCreate: false,
          dialogCreateTitle: '新增排班信息',
          dialogCreateData: {
            doctorName: '',
            doctorCode: '',
            date: '',
            ampmType: '',
            type: '',
            operationNum: '',
            isDeleted: '',
            doctorId: '',
            createTime: '',
            updateTime: '',
            createId: '',
            id: '',
            optNo: '',
            updateId: ''
          },
          pickerOptions2: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            }]
          },
          // 排班表
          today: '',
          weekday: '',
          weeks: [],
          appointmentTimeWeek: 1,
          appointmentTimeDay: 1,
          schedulingList: [],
          options: []
        }
      },
      methods: {
        selectedType(selected) {
          console.log('选择')
          console.log(selected)
          this.dialogCreateData.doctorCode = selected.value
          this.dialogCreateData.doctorId = selected.value
          this.dialogCreateData.doctorName = selected.label
          this.showScheduling()
        },
        initSelect() {
          select({ type: 1 }).then((res) => {
            this.options = res.data.list.map(item => {
              return { label: item.name, value: item.id }
            })
          })
        },
        showScheduling() {
          var doctorId = this.dialogCreateData.doctorId
          if (!doctorId) {
            return
          }
          pending({ doctorId: doctorId }).then(res => {
            var count = 0
            var index = 0
            var arr = [[]]
            for (var i = 0; i < res.data.list.length; i++) {
              count++
              var item = res.data.list[i]
              if (count > 7) {
                count = 1
                index++
                arr[index] = []
              }
              arr[index].push(item)
            }
            this.schedulingList = arr
            console.log(arr)
          })
        },
        dialogCreateShow(item, amORpm) {
          if (item) {
            console.log(item)
            console.log(this.dialogCreateData)
            this.dialogCreateTitle = '编辑排班信息'
            for (const k in item) {
              this.dialogCreateData[k] = item[k]
            }
            this.dialogCreateData.ampmType = amORpm
            if (amORpm === 0) {
              this.dialogCreateData.type = item.amSchedule.type
              this.dialogCreateData.optNo = item.amSchedule.optNo
            } else if (amORpm === 1) {
              this.dialogCreateData.type = item.pmSchedule.type
              this.dialogCreateData.optNo = item.pmSchedule.optNo
            }
          } else {
            this.dialogCreateTitle = '新增排班信息'
            setTimeout(() => {
              this.$refs['dialogCreateData'].resetFields()
            }, 100)
          }
          this.dialogCreate = true
        },
        selectAppointmentTime(week, day) {
          this.appointmentTimeWeek = week
          this.appointmentTimeDay = day
        },
        generateDay(start, end) {
          const weekArr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
          const weeks = []
          const now = new Date()
          const year = now.getFullYear()
          let weekday
          let month = now.getMonth()
          let date
          const endDay = new Date(year, month + 1, 0).getDate()
          month = month + 1
          function getFirstDayOfWeek(now) {
            var Monday = now.getDay() || 7 // 获取星期几,getDay()返回值是 0（周日） 到 6（周六） 之间的一个整数。0||7为7，即weekday的值为1-7
            now.setDate(now.getDate() - Monday + 1 - 7)// 往前算（weekday-1）天，年份、月份会自动变化
            date = now.getDate()
            weekday = now.getDay()
          }
          getFirstDayOfWeek(now)
          for (var i = 0; i < 4; i++) {
            weeks.push({
              days: []
            })
            for (var j = 0; j < 7; j++) {
              if (date > endDay) {
                month = month + 1
                date = 1
              }
              if (weekday > 6) {
                weekday = 0
              }
              weeks[i]['days'].push({
                date: month + '.' + date,
                weekDay: weekArr[weekday]
              })
              date++
              weekday++
            }
          }
          this.weeks = weeks
        },
        handleFilter() {
          pending().then(res => {
            this.tableList1 = res.data.list
          })
        },
        dialogCreateSubmit(formName) {
          create(this.dialogCreateData).then(() => {
            this.dialogCreate = false
            this.showScheduling()
            this.$refs[formName].resetFields()
          })
        },
        // 右侧的添加分类提交
        addCategorySubmit(formData) {
          //  要写个提交的接口    formData为提交的数据
        }
      },
      filters: {
        typeFilter(value) {
          const typeArr = ['门诊', '手术', '休息']
          return typeArr[value]
        },
        dateFilter(value) {
          const weekArr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
          const dateArr = value.split('-')
          const weekday = new Date(value).getDay()
          return `${dateArr[1]}.${dateArr[2]}(${weekArr[weekday]})`
        }
      }
    }
</script>

<style lang="scss">
.wrap{
    .flexWrap{
        display: flex;
        height: 100%;
        background-color: #fff;
        overflow-y: scroll;
        overflow-x: hidden;
        .leftWrap{
            flex: 10;
        }
        .rightWrap{
            flex: 2;
        }
    }
    .filterBox{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .filterPart{
            line-height: 2;
            .el-date-editor .el-range-separator{
                width: 40px;
            }
        }
    }
    .dialogLeftTop1_1{
        .el-select{
            display: block;
        }
    }
    .editor-container {
        min-height: 500px;
        margin: 0 0 30px;
        .editor-upload-btn-container {
            text-align: right;
            margin-right: 10px;
            .editor-upload-btn {
                display: inline-block;
            }
        }
      }
    //   排班表
    .block{
        display: flex;
        .AMOrPM{
            width: 120px;
            height: 152px;
            margin: 16px 0 16px 20px;
            border: 1px solid #ddd;
            p{  
                margin: 0;
                height: 50px;
                line-height: 50px;
                text-align: center;
                border-bottom: 1px solid #ddd;
            }
        }
        .sliderWrap{
            flex: 1;
            .appointmentTimeItem{
                display: flex;
                padding: 0 20px 0 0;
                .appointmentTime{
                    flex: 1;
                    list-style: none;
                    margin: 0;
                    border: 1px solid #ddd;
                    text-align: center;
                    p{
                        margin: 0;
                        height: 50px;
                        line-height: 50px;
                        border-bottom: 1px solid #ddd;
                        &.work{
                            position: relative;
                            .badge{
                                position: absolute;
                                right: 2px;
                                bottom: 2px;
                                height: 16px;
                                line-height: 12px;
                                padding: 2px 5px;
                                font-size: 12px;
                                color: #fff;
                                border-radius: 4px;
                                background-color: #f56c6c;
                            }
                        }
                    }
                }
            }
        
        }
    }
}
</style>
